{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>代理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href={% static "css/font.css" %}>
    <link rel="stylesheet" href={% static "css/xadmin.css" %}>
    <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
    <script type="text/javascript" src={% static "lib/layui/layui.js" %} charset="utf-8"></script>
    <script type="text/javascript" src={% static "js/xadmin.js" %}></script>



</head>

<body class="layui-anim layui-anim-up">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="/">首页</a>
        <a href="#">安全扫描</a>
          <a href="#">代理</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md3 x-so">
            <input type="text" name="domain" id="domain" placeholder="搜索域名" autocomplete="off" class="layui-input">
            <button class="layui-btn" lay-submit="search" lay-filter="search"><i class="layui-icon"></i></button>
        </form>

        <button class="layui-btn layui-btn" onclick="start_proxy()">开始监听</button>
        <button class="layui-btn layui-btn" onclick="stop_proxy()">停止监听</button>
        <button class="layui-btn layui-btn" onclick="filter_data()">过滤数据包</button>
        <span class="x-right"
              style="line-height:40px">代理IP：{{ host }};   代理端口：{{ port }};  端口状态：{{ port_status }}</span>

    </div>


    <div class="layui-tab" lay-filter="demo">
        <ul class="layui-tab-title">
            <li class="layui-this">全部数据包</li>
            <li class="" lay-filter="all">过滤数据包</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-card-body">
                    <table class="layui-hide" id="all" lay-filter="all"></table>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-card-body">
                    <table class="layui-hide" id="filter" lay-filter="filter"></table>
                </div>

            </div>
            <div class="layui-tab-item">4</div>
        </div>
    </div>
</div>

</div>
<script src="{% static "lib/layui/layui.js" %}"></script>

<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-xs" lay-event="check">查看数据包</a>
</script>


<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#all'
            , url: '{% url "display_proxy_data" %}?type=all&domain={{ domain }}'
            , cols: [[
                {type: 'checkbox'}
                , {field: 'url', title: 'URL网址', sort: true,}
                , {field: 'method', width: 100, title: '提交方法',}
                , {field: 'request_content', title: '参数'}

            ]]
            , page: true
        });


    });

    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#filter'
            , url: '{% url "display_proxy_data" %}?type=filter&domain={{ domain }}'

            , cols: [[
                {type: 'checkbox'}
                , {field: 'url', width: 500, title: 'URL网址',}
                , {field: 'parm', width: 300, title: '参数',}
                , {fixed: 'right', title: '操作', toolbar: '#operation', width: 150}
            ]]
            , page: true
        });

        table.on('tool(filter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'check') {
                layer.open({
                    type: 2
                    , title: '查看数据包'
                    , content: "{% url "check_filter_data" %}?id=" + data.id
                    , maxmin: true
                    , area: ['1000px', '500px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                        submit.click();
                    }
                });
            }
        });

    });


</script>


<script>

    function start_proxy() {
        layer.confirm('确认要启动代理吗？', function (index) {
            $.ajax(
                {
                    url: "{% url "starting_proxy" %}",
                    method: "GET",
                    async: true,

                }
            );
            layer.close(index);
            layer.alert('启动成功', {
                time: 2000,
                end: function () {
                    location.href = ""
                }
            })

        });
    }




    function stop_proxy() {
        layer.alert("由于库问题，不能停止代理~~")
    }

    function filter_data() {
        layer.confirm('是否要过滤数据包？', function (index) {
            $.ajax(
                {
                    url: "{% url "filter_packect" %}",
                    method: "GET"
                }
            );
            layer.close(index);
            layer.alert('过滤成功', {
                time: 2000,
                end: function () {
                    location.href = ""
                }
            })
        });
    }


</script>


</body>
</html>


